<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Category wise bar chart</title>

<script type="text/javascript" src="jquery/jquery-min.js"></script>
<script type="text/javascript">
	$(function() {
		var chart;
		$(document).ready(
				function() {
					chart = new Highcharts.Chart({
						chart : {
							renderTo : 'container',
							type : 'column'
						},
						title : {
							text : 'Monthly Average Rainfall'
						},
						subtitle : {
							text : 'Source: WorldClimate.com'
						},
						xAxis : {
							categories : [ 'Jan', 'Feb', 'Mar', 'Apr', 'May',
									'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov',
									'Dec' ]
						},
						yAxis : {
							min : 0,
							title : {
								text : 'Rainfall (mm)'
							}
						},
						legend : {
							layout : 'vertical',
							backgroundColor : '#FFFFFF',
							align : 'left',
							verticalAlign : 'top',
							x : 100,
							y : 70,
							floating : true,
							shadow : true
						},
						tooltip : {
							formatter : function() {
								return '' + this.x + ': ' + this.y + ' mm';
							}
						},
						plotOptions : {
							column : {
								pointPadding : 0.2,
								borderWidth : 0
							}
						},
						series : [
								{
									name : 'Tokyo',
									data : [ 49.9, 71.5, 106.4, 129.2, 144.0,
											176.0, 135.6, 148.5, 216.4, 194.1,
											95.6, 54.4 ]

								},
								{
									name : 'New York',
									data : [ 83.6, 78.8, 98.5, 93.4, 106.0,
											84.5, 105.0, 104.3, 91.2, 83.5,
											106.6, 92.3 ]

								},
								{
									name : 'London',
									data : [ 48.9, 38.8, 39.3, 41.4, 47.0,
											48.3, 59.0, 59.6, 52.4, 65.2, 59.3,
											51.2 ]

								},
								{
									name : 'Berlin',
									data : [ 42.4, 33.2, 34.5, 39.7, 52.6,
											75.5, 57.4, 60.4, 47.6, 39.1, 46.8,
											51.1 ]

								} ]
					});
				});

	});
</script>
</head>
<body>
	<script src="js/highcharts/highcharts.js"></script>
	<script src="js/highcharts/modules/exporting.js"></script>

	<div id="container"
		style="min-width: 400px; height: 400px; margin: 0 auto"></div>

</body>
</html>
